<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>操作日志</title>
    <link type="favicon" rel="shortcut icon" href="./static/img/favicon.ico" />
    <link rel="stylesheet" href="./static/css/bootstrap.css">
    <link rel="stylesheet" href="./static/css/init.css">
    <link rel="stylesheet" href="./static/less/common.css">
    <link rel="stylesheet" href="./static/less/log.css">
    <script src="./static/js/Syunew6.js"></script>
    <script src="./static/js/isLogin.js"></script>
</head>
<body>
    <div id="log" class="log-box common-box">
        <div class="head-box">
            <div class="logo-box">
                <img class="logo" src="./static/img/logo_1.png" alt="">
                <span class="title">成都杜甫草堂博物馆综合信息管理平台</span>
            </div>
            <div class="user-box">
                <div class="name">{{userData.userName}}，欢迎您</div>
                <div class="logout">
                    <span @click="logout" class="cus">
                        <i class="glyphicon glyphicon-log-out"></i>
                        <span>登出</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="address-box">
                <div class="address">
                    <a class="href" href="/index.html">首页</a>
                    <i class="glyphicon glyphicon-menu-right right"></i>
                    <span>操作日志</span>
                </div>
                <div class="time">
                    {{date + '&nbsp;星期' + week + '&nbsp;' + time}}
                </div>
            </div>
            <div class="tab">
                <p class="title current">日志记录</p>
            </div>
            <div class="con-box">
                <div class="table-box table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>操作内容</th>
                                <th>模块</th>
                                <th>子模块</th>
                                <th>操作管理员</th>
                                <th>时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item,i) in logList" :key="i">
                                <td class="active">{{item.id}}</td>
                                <td class="warning">{{item.operation}}</td>
                                <td class="danger">{{item.moduleName}}</td>
                                <td class="info">{{item.moduleChileName}}</td>
                                <td class="success">{{item.author}}</td>
                                <td class="info">{{timeFormat('yyyy-MM-dd hh:mm',item.createTime)}}</td>
                            </tr>
                        </tbody>
                    </table>
                    <nav aria-label="Page navigation" class="u_pager hidden-xs">
                        <span class="total">总计{{total}}条</span>
                        <ul class="pagination">
                            <li :class="currentPage === 1 ? 'disabled' : ''" @click="topPage">
                                <a href="javascript:void(0);" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li v-show="userPages.length < 10" v-for="i in userPages" :class="currentPage === i ? 'active' : ''" @click="selectPage(i)"><a href="javascript:void(0);">{{i}}</a></li>
                            <li v-show="userPages.length > 9" v-for="i in userPages" :class="currentPage === i ? 'active' : ''" @click="selectPage(i)">
                                <a href="javascript:void(0);" v-if="i == 1 || i == 2 || i == currentPage || i == (currentPage - 1) || i == (currentPage + 1) || i == (userPages.length) || i == (userPages.length - 1)">{{i}}</a>
                                <a class="u_page_n" href="javascript:void(0);" v-else-if="i == (currentPage - 2)|| i == (currentPage + 2)"><span aria-hidden="true">...</span></a>
                            </li>
                            <!-- <li>
                                <a href="javascript:void(0);" class="u_page_n">
                                    <span aria-hidden="true">...</span>
                                </a>
                            </li> -->
                            <li :class="currentPage === userPages[userPages.length-1] ? 'disabled' : ''" @click="nextPage">
                                <a href="javascript:void(0);" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                    <nav class="u_pager visible-xs-block">
                        <ul class="pager">
                            <li @click="topPage" :class="currentPage === 1 ? 'disabled' : ''"><a href="javascript:void(0);">上一页</a></li>
                            <li @click="nextPage" :class="currentPage === userPages[userPages.length-1] ? 'disabled' : ''"><a href="javascript:void(0);">下一页</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <div class="footer">
            Copyright 成都杜甫草堂博物馆
        </div>
    </div>
    <script src="./static/js/jquery-3.3.1.min.js"></script>
    <script src="./static/js/bootstrap.js"></script>
    <script src="./static/js/vue.min.js"></script>
    <script src="./static/js/axios.min.js"></script>
    <script src="./static/api/api.js"></script>
    <script src="./static/js/prism.js"></script>
    <script src="./static/js/spop.min.js"></script>
    <script>
        var log = new Vue({
            el: '#log',
            data() {
                return {
                    time: this.timeFormat('hh:mm'),
                    date: this.timeFormat('yyyy年MM月dd日'),
                    week: this.timeFormat('D'),
                    baseUrl: api.baseUrl,
                    roles: store.fetch('userLoginInfo').roles,
                    userData: store.fetch('userLoginInfo'),
                    logList: [],
                    userPages: [],//页数
                    total: 0,//总条数
                    userList: [],//用户列表
                    currentPage: 1,//当前页码
                }
            },
            created() {

            },
            mounted() {
                this.getDate();
                this.getLogList();
            },
            methods: {
                //时间格式化
                timeFormat(fmt,time=false) {
                    if(time) {
                        var date = new Date(time);
                    }else {
                        var date = new Date();
                    }
                    let week = {
                        0: '日',
                        1: '一',
                        2: '二',
                        3: '三',
                        4: '四',
                        5: '五',
                        6: '六'
                    }
                    var o = { 
                        "M+" : date.getMonth()+1,     //月份 
                        "d+" : date.getDate(),     //日 
                        "h+" : date.getHours(),     //小时 
                        "m+" : date.getMinutes(),     //分 
                        "s+" : date.getSeconds(),     //秒 
                        "q+" : Math.floor((date.getMonth()+3)/3), //季度 
                        "S" : date.getMilliseconds(),    //毫秒
                        "D" : week[date.getDay()]
                    }; 
                    if(/(y+)/.test(fmt)) 
                    fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length)); 
                    for(var k in o) 
                    if(new RegExp("("+ k +")").test(fmt)) 
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length))); 
                    return fmt;
                },

                //动态获取时间、
                getDate() {
                    setInterval(() => {
                        this.time = this.timeFormat('hh:mm');
                        this.date = this.timeFormat('yyyy年MM月dd日');
                        this.week = this.timeFormat('D')
                    },1000)
                },

                //登出
                logout() {
                    store.clear('userLoginInfo');
                    store.clear('userData');
                    window.location.href = '/login.html'
                },


                //点击页码
                selectPage(i) {
                    this.currentPage = i;
                    this.getLogList();
                },
                //上一页
                topPage() {
                    if(this.currentPage === 1) {
                        return false;
                    }
                    this.currentPage --;
                    this.getLogList();
                },
                //下一页
                nextPage() {
                    if(this.currentPage === this.userPages[this.userPages.length-1]) {
                        return false;
                    }
                    this.currentPage++;
                    this.getLogList();
                },

                getLogList() {
                    let body = {
                        pageNum: this.currentPage,
                        pageSize: 10
                    }
                    this.complete = false;
                    api.getLog(body).then(res => {
                        this.complete = true;
                        if(res.data.status == 'success') {
                            let data = res.data.data.list;
                            this.logList = data;
                            this.userPages = res.data.data.navigatepageNums;
                            // let test = []
                            // for (let index = 1; index < 100; index++) {
                            //     test.push(index)
                                
                            // }
                            // this.userPages = test;
                            this.total = res.data.data.total;
                        }
                        // window.pageSet()
                    });
                },

            }
        })
    </script>
</body>
</html>